<template>
<div>
    <div style="margin: 20px 10px;">
      <el-form :inline="true" :model="query" class="demo-form-inline">
        <el-form-item label="单位名称">
          <el-input v-model="query.unitName" placeholder="请输入单位名称" clearable />
        </el-form-item>
        <el-form-item label="联系人姓名">
          <el-input v-model="query.contactName" placeholder="请输入联系人姓名" clearable />
        </el-form-item>
        <el-form-item label="状态"  >
          <el-select v-model="query.status" placeholder="请选择状态" style="width: 150px;">
            <el-option label="待审核" :value="1" />
            <el-option label="拒绝" :value="2" />
            <el-option label="同意,待缴费" :value="3" />
            <el-option label="会员" :value="4" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="queryClick">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="resetQuery(query)">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table :data="tableData" border stripe style="width: fit-content">
      <el-table-column prop="id" label="ID" />
      <el-table-column prop="unitName" label="单位名称" min-width="240" />
      <el-table-column prop="contactName" label="联系人姓名" />
      <el-table-column prop="contactPhone" label="联系人电话" min-width="120" />
      <el-table-column prop="status" label="状态">
        <template #default="{ row }">
          <el-tag :type="getStatusTagType(row.status)">
            {{ getStatusLabel(row.status) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="unitAddress" label="单位地址" />
      <el-table-column prop="creditCode" label="统一社会信用代码" />
      <el-table-column prop="registrationTime" label="注册时间" />
      <el-table-column prop="registeredCapital" label="注册资金(万)" />
      <el-table-column prop="contactEmail" label="联系人邮箱" />
      <el-table-column prop="apprUserName" label="审核人" />
      <el-table-column prop="apprTime" label="审核时间" />
      <el-table-column prop="initialAccount" label="初始账号" />
      <el-table-column prop="initialPassword" label="初始密码" />
      <el-table-column prop="businessLicense" label="营业执照" width="100">
        <template #default="{ row }">
          <el-image
              v-if="row.businessLicense"
              :src="imgSrc(row.businessLicense)"
              fit="cover"
              style="width: 50px; height: 50px; cursor: pointer;"
              @click="previewImage(row.businessLicense)"
          />
        </template>
      </el-table-column>
      <el-table-column prop="applicationForm" label="入会申请表" width="100">
        <template #default="{ row }">
          <el-button v-if="row.applicationForm" type="primary" size="small" @click="downloadData(row.applicationForm)">下载</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="invoice" label="发票" width="100">
        <template #default="{ row }">
          <el-button v-if="row.invoice" type="primary" size="small" @click="downloadData(row.invoice)">下载</el-button>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" min-width="160">
        <template #default="{ row }">
          <el-button v-if="row.status === 1" link type="primary" size="small" @click="audit(row)">审核</el-button>
          <el-button v-else-if="row.status === 3" link type="primary" size="small" @click="allocate(row)">分配账号</el-button>
          <el-button link type="primary" size="small" @click="edit(row)">编辑</el-button>
          <el-button link type="primary" size="small" @click="del(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
        <div class="demo-pagination-block" style="margin-top: 20px;">
            <el-pagination
            v-model:current-page="pageNo"
            v-model:page-size="pageSize"
            :page-sizes="[5, 10, 15, 20]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            />
        </div>
        <BsApplyFrom ref="applyForm" @refresh="refresh"></BsApplyFrom>
        <BsApplyAudit ref="applyAudit" @refresh="refresh"></BsApplyAudit>
        <BsApplyAllocate ref="applyAllocate" @refresh="refresh"></BsApplyAllocate>
</div>
</template>
<script setup lang="ts">
import { ref, computed, useTemplateRef} from 'vue'
import BsApply from '../../../api/guild/bsApply'
import { ElMessage } from 'element-plus'
import {downLoadFile,confirm} from '../../../api/common/common'
import BsApplyFrom from './BsApplyForm.vue'
import BsApplyAudit from './BsApplyAudit.vue'
import BsApplyAllocate from './BsApplyAllocate.vue'

let applyForm=useTemplateRef('applyForm')
let applyAudit=useTemplateRef('applyAudit')
let applyAllocate=useTemplateRef('applyAllocate')
// 分页相关
const pageNo = ref(1)
const pageSize = ref(5)
const total = ref(0)
const tableData = ref([])
// 查询条件
const query = ref({
  unitName: '',
  contactName: '',
  status: '',
  pageNo: pageNo.value,
  pageSize: pageSize.value,
})

//获取表格数据
async function getData() {
  query.value.pageNo = pageNo.value
  query.value.pageSize = pageSize.value
  const result = await BsApply.page(query.value)
  console.log('result',result);
  
  tableData.value = result.data.list
  total.value = result.data.total
}
function handleCurrentChange() {
  getData()
}
function handleSizeChange() {
    getData()
}
function queryClick() {
  pageNo.value = 1
  getData()
}
function resetQuery(){
    query.value={}
    getData()
}
// 获取状态标签类型
function getStatusTagType(status: number): string {
  switch (status) {
    case 1:
      return 'info';
    case 2:
      return 'danger';
    case 3:
      return 'success';
    case 4:
      return 'warning';
    default:
      return '';
  }
}
// 获取状态标签文本
function getStatusLabel(status: number): string {
  switch (status) {
    case 1:
      return '待审核';
    case 2:
      return '拒绝';
    case 3:
      return '同意,待缴费';
    case 4:
      return '会员';
    default:
      return '';
  }
}
let imgSrc = computed(() => {
  return (v:string)=>{
    //判断是否http/https开头
    if (v.startsWith('http://') || v.startsWith('https://')) {
      return v;
    }
    return v ? 'api/common/download/' + v : '';
  }
});

// 预览图片
function previewImage(imageUrl: string) {
  imageUrl = (imageUrl.startsWith('http://') || imageUrl.startsWith('https://')) ? imageUrl : '/api/common/download/' + imageUrl;
  ElMessageBox.alert(
      `<img src="${imageUrl}" style="max-width: 100%; max-height: 400px;" />`,
      '图片预览',
      {
        dangerouslyUseHTMLString: true,
        showConfirmButton: false,
        showCancelButton: true,
        cancelButtonText: '关闭',
      }
  );
}
//删除
async function del(row){
    try{
        let flag=await confirm("确认是否删除？")
        if(flag){
            let res=await BsApply.del(row.id)
            ElMessage.success(res.data)
            getData()
        }
    }catch(e){
        console.log(e);
        ElMessage.error(e.message)
    }
}
//编辑
function edit(row){
    let rowdata=JSON.parse(JSON.stringify(row))
    applyForm.value?.edit(rowdata)
}
//审核
function audit(row){
    applyAudit.value.open(row)
}
//分配账号
function allocate(row){
    applyAllocate.value.open(row)
}
//更新数据
function refresh(){
    getData()
}
getData()
</script>